<template>
  <div class="setting_wrap">
    <headTop :headClass="'white_header'">Set up</headTop>
    <div class="infomation">
      <div class="info" @click="toIdentify">
        <span class="left">Real name authentication</span>
        <div class="right_wrap">
          <span class="name">{{trueName ? trueName : ''}}</span>
          <i class="iconfont icon-fanhui-copy-copy"></i>
        </div>
      </div>
      <router-link tag="div" :to="{path: 'editPassword', query: {type: 1}}" class="info">
        <span class="left">Modify login password</span>
        <div class="right_wrap">
          <i class="iconfont icon-fanhui-copy-copy"></i>
        </div>
      </router-link>
      <router-link tag="div" :to="{path: 'editPassword', query: {type: 2}}" class="info">
        <span class="left">Modify transaction password</span>
        <div class="right_wrap">
          <i class="iconfont icon-fanhui-copy-copy"></i>
        </div>
      </router-link>
      <div class="info" @click="selLanguage">
        <span class="left">Language switching</span>
        <div class="right_wrap">
          <span class="name">{{language}}</span>
          <i class="iconfont icon-fanhui-copy-copy"></i>
        </div>
      </div>
    </div>
    <div class="mask" v-if="isSelect">
      <div class="sel_wrap">
        <div class="sel_title">Choice of language</div>
        <ul class="lang_list">
          <li class="lang_item" @click="langTab(1)">
            <span class="cn">{{lang1}}</span>
            <i class="iconfont icon-weixuanzhong" :class="{'icon-xuanzhong1': lang === 1}"></i>
          </li>
          <li class="lang_item" @click="langTab(2)">
            <span class="cn">{{lang2}}</span>
            <i class="iconfont icon-weixuanzhong" :class="{'icon-xuanzhong1': lang === 2}"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'settings',
  data () {
    return {
      trueName: '',
      language: 'EN',
      isSelect: false,
      lang: 2,
      lang1: 'Chinese',
      lang2: 'EN',
      idCard: ''
    };
  },
  beforeMount () {
    this.getInfo();
  },
  methods: {
    langTab (num) {
      this.isSelect = false;
      if (num === 1) {
        this.language = this.lang1;
        this.lang = num;
        window.location.href = 'http://www.ytccchain.com';
      }
    },
    // Choice of language
    selLanguage () {
      this.isSelect = true;
    },
    // get data
    getInfo () {
      this.axios.get('index/rename/rename_s').then(({data}) => {
        if (data.status === 200) {
          this.trueName = data.data.username;
          this.idCard = data.data.id_card;
        } else {
        }
      });
    },
    // Real name authentication
    toIdentify () {
      if (this.trueName && this.idCard) {
        this.Toast('The real name has been certified successfully and cannot be modified.');
      } else {
        this.$router.push('certification');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .setting_wrap{
    padding-top: 108px;
    background-color: #f5f5f5;
    .infomation{
      width: 100%;
      background-color: #fff;
      padding: 0 30px;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 60px;
      .info{
        width: 100%;
        height: 106px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        .left{
          font-size: 28px;
          color: #282828;
        }
        .right_wrap{
          display: flex;
          align-items: center;
          font-size: 26px;
          color: #999;
          .iconfont{
            font-size: 30px;
            color: #afabbd;
            margin-left: 20px;
          }
        }
        &:nth-last-child(1){
          border-bottom: none;
        }
      }
    }
    .mask{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, .6);
      z-index: 99;
      .sel_wrap{
        width: 100%;
        height: 460px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #fff;
        border-radius: 20px 20px 0 0;
        .sel_title{
          width: 100%;
          height: 102px;
          line-height: 102px;
          border-bottom: 1px solid #282828;
          text-align: center;
          font-size: 32px;
        }
        .lang_list{
          width: 100%;
          padding: 0 30px;
          .lang_item{
            height: 88px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e6e6e6;
            .icon-xuanzhong1{
              color: $color;
            }
          }
        }
      }
    }
  }
</style>
